<template>
  <div class="news-container">
    <!-- 标题区域 -->
    <div class="news-header">
      <h1 class="title">{{ detailList.title }}</h1>
      <el-divider />
    </div>
    <!-- 元信息展示 -->
    <el-row class="meta-info">
      <el-col :span="6">
        <el-tag type="primary">{{ detailList.typeName }}</el-tag>  
      </el-col>
      <el-col :span="6">
        <el-icon><View /></el-icon>
        <span>{{ detailList.pageViews }} 次浏览</span>  
      </el-col>
      <el-col :span="12" class="publish-time">
        <el-icon><Clock /></el-icon>
        <span>{{ detailList.pastHours }}小时前</span> 
      </el-col>
    </el-row>
    <!-- 内容区域 -->
    <el-card class="content-card"> 
      <div v-html="detailList.article" class="content"></div>
    </el-card>
  </div>
</template>

<script setup>
import { Clock, View } from '@element-plus/icons-vue';  
import { ref, onMounted } from 'vue'
import { getShowNewsDetail } from '@/api/index'
import { useRoute } from 'vue-router'

const route = useRoute()
const detailList = ref({})

onMounted(()=>{
  getNewsDetail()
})

const getNewsDetail = async () => {
  let ret = await getShowNewsDetail(route.query.hid)

  console.log(JSON.stringify(detailList.value))
  detailList.value = ret.headline
}

</script>

<style lang="less" scoped>
/* 标题渐变效果 */
.news-header .title {
  font-size: 32px;
  background: linear-gradient(45deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 20px 0;
}

/* 元信息区域布局 */
.meta-info {
  margin: 20px 0;
  .el-col {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .publish-time { justify-content: flex-end; }
}

/* 内容卡片样式 */
.content-card {
  margin-top: 30px;
  .content {
    line-height: 1.8;
    img {
      max-width: 100%;
      border-radius: 8px;
      margin: 15px 0;
    }
  }
}


@media (max-width: 768px) {
  .news-header .title { font-size: 24px; }
  .meta-info .el-col { 
    width: 100%;
    margin-bottom: 12px;
  }
}


</style>